<template>
    <div class="reply-box" v-if="show">
        <div class="box-normal">
            <div class="reply-box-avatar">
                <img class="author-avatar" v-if="user.avatar" :src="user.avatar" alt=""/>
                <img class="author-avatar" v-else :src="web.webInfo.siteConfig.touristAvatar" alt=""/>
            </div>
            <textarea class="reply-box-textarea" v-model="commentContent" :placeholder="placeholderText"
                      @input.prevent="inputActive"></textarea>
            <button :class="sendActive ? 'send-active' : ''" @click="handleAdd">评论</button>
            <div class="expression">
                <svg-icon icon-class="expression" size="0.5rem" @click="isEmoji = !isEmoji"></svg-icon>
            </div>
        </div>
        <Emoji v-show="isEmoji" class="box-expand" @addEmoji="handleEmoji"></Emoji>
    </div>
</template>

<script setup lang="ts">
import {addComment} from "@/api/comment";
import {CommentForm} from "@/api/comment/types";
import useStore from "@/store";
import emojiList from "@/utils/emoji";

const {user, web, app} = useStore();

const emit = defineEmits(["reload"]);
const props = defineProps({
    commentType: {
        type: Number,
    },
    show: {
        type: Boolean,
        default: true,
    },
    typeId: {
        type: Number,
    },
});
const data = reactive({
    nickname: "",
    sendActive: false,
    show: props.show,
    commentContent: "",
    isEmoji: false,
    commentForm: {
        typeId: props.typeId,
        commentType: props.commentType,
        parentId: undefined,
        replyId: undefined,
        toUid: undefined,
        commentContent: "",
    } as CommentForm,
});
const {nickname, sendActive, show, commentContent, isEmoji, commentForm} = toRefs(data);
const placeholderText = computed(() =>
    nickname.value ? `回复 @${nickname.value}：` : "发一条友善的评论"
);
const inputActive = () => {
    sendActive.value = commentContent.value.length != 0;
};
const handleEmoji = (key: string) => {
    commentContent.value += key;
    sendActive.value = true;
};
const handleAdd = () => {
    if (!user.id) {
        app.setLoginFlag(true);
        return;
    }
    if (commentContent.value.trim() == "") {
        window.$message?.error("评论不能为空");
        return;
    }
    // 解析表情
    commentForm.value.commentContent = commentContent.value.replace(/\[.+?\]/g, (str) => {
        return (
            "<img src= '" +
            emojiList[str] +
            "' width='20' height='20' style='margin: 0 1px;vertical-align: text-bottom' alt='not'/>"
        );
    });
    addComment(commentForm.value).then(({data}) => {
        if (data.flag) {
            sendActive.value = false;
            commentContent.value = "";
            if (web.webInfo.siteConfig.commentCheck) {
                window.$message?.warning("评论成功，正在审核中");
            } else {
                window.$message?.success("评论成功");
            }
            // 重新加载评论列表
            emit("reload");
        }
    });
};
const setReply = (flag: boolean) => {
    show.value = flag;
};
defineExpose({commentForm, nickname, setReply});
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.reply-box {
  position: relative;
  display: flex;
  flex-direction: column;

  .box-normal {
    display: flex;
    align-items: center;
    height: 1rem;
    transition: 0.2s;
    width: 95%;
    margin: 0.5rem auto;

    .reply-box-avatar {
      @include flex;

      .author-avatar {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    ::-webkit-input-placeholder {
      color: var(--main-1-hs1);
    }

    .reply-box-textarea {
      margin-left: 0.5rem;
      width: 100%;
      overflow-wrap: break-word;
      word-wrap: break-word;
      height: 1rem;
      font-size: 0.35rem;
      line-height: 0.5rem;
      flex-grow: 1;
      color: var(--main-1);
      resize: none;
      padding: 0.2rem;
      border: none;
      border-radius: 0.1rem;
      box-shadow: inset 0 0 0.05rem 0.02rem var(--box-shadow);

      &:focus {
        outline: none;
        box-shadow: 0 0 0.05rem 0.02rem var(--red-color);
      }

      &::selection {
        background-color: var(--main-2);
        color: var(--main-1);
      }
    }

    button {
      width: 1.8rem;
      font-weight: bold;
      font-size: 0.4rem;
      height: 1rem;
      border-radius: 0 0.1rem 0.1rem 0;
      color: var(--main-1);
      backdrop-filter: blur(0.25rem) saturate(150%);
      border: none;
      box-shadow: 0.03rem 0.03rem 0.04rem 0.02rem #0f122a,
      -0.02rem -0.02rem 0.04rem 0.02rem var(--box-shadow-c);
      transition: 0.5s;
      letter-spacing: 0.05rem;
      position: relative;
      left: -0.1rem;

      &:hover {
        transform: scale(0.9);
      }

      &:focus {
        box-shadow: none;
        border: 0.02rem solid var(--main-1);
      }
    }

    .expression {
      width: 1rem;
      margin-left: 0.4rem;

      :hover {
        border-radius: 50%;
        box-shadow: 0 0 0.1rem 0.05rem var(--red-color);
      }
    }
  }

  .box-expand {
    position: absolute;
    top: 1.65rem;
  }
}
</style>
